#warp {
    width: 850px;
    margin: 0 auto;
    border: solid gray 1px;
}
#main {
    display: grid;
    grid-template-rows: 300px 300px;
    grid-template-columns: 400px 400px;
    grid-gap: 20px 20px;
}

.b1:hover{
    transform: scale(0.5,0.5) rotate(180deg);
    transition-delay: .5s;
    transition-duration: 2s;
}
.b2:hover{
    transform: translate(120px,60px);
    transition-delay: .5s;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}
.b3 {
    position: relative;
    height: 200px;
    width: 360px;
}
.b3 img{
    position: absolute;
    top:0px;
    left:20px;
    width: 320px;
    height:200px;
    transition-property: all;
    transition-duration: 2s;
    transition-delay: .5s;
}
.b3 img:first-child {
    z-index:1;
    backface-visibility: hidden;
}
.b3:hover img{
    transform: rotateY(180deg) ;
}

.b4 {
    width: 500px;
    height: 450px;
    margin: 100px 400px;
    position: fixed;
    transform-style: preserve-3d;
    animation-name: example;
    animation-delay: 0s;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.b4 img{
    width: 500px;
    height: 450px;
    position: absolute;
    border: 2px solid #ffffff;
    border-radius: 10px;
}
.b4 img:nth-child(1){
    transform: rotateY(0deg) translateZ(500px);
}
.b4 img:nth-child(2){
    transform: rotateY(60deg) translateZ(500px);
}
.b4 img:nth-child(3){
    transform: rotateY(120deg) translateZ(500px);
}
.b4 img:nth-child(4){
    transform: rotateY(180deg) translateZ(500px);
}
.b4 img:nth-child(5){
    transform: rotateY(240deg) translateZ(500px);
}
.b4 img:nth-child(6){
    transform: rotateY(300deg) translateZ(500px);
}
@keyframes example {
    0%{
        transform: rotateY(0deg);
    }
    16%{
        transform: rotateY(60deg);
    }
    33%{
        transform: rotateY(120deg);
    }
    50%{
        transform: rotateY(180deg);
    }
    66%{
        transform: rotateY(240deg);
    }
    84%{
        transform: rotateY(300deg);
    }
    100%{
        transform: rotateY(360deg);
    }
}